<%@    page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
    String webSocketPath = request.getServerName() + ":" + request.getServerPort() + path;
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <base href="<%=basePath%>">
    <title>数据诊断页面</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is	my page">
    <meta http-equiv="content-Type" content="text/html;charset=gb2312">

    <link rel="stylesheet" type="text/css" href="jquery/easyui1.4.2/themes/gray/easyui.css">
    <link rel="stylesheet" type="text/css" href="jquery/easyui1.4.2/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="css/assets/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="css/assets/css/ace.min.css"/>
    <link rel="stylesheet" href="css/assets/css/ace-rtl.min.css"/>
    <link rel="stylesheet" href="css/assets/css/ace-skins.min.css"/>

    <script type="text/javascript" src="jquery/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="jquery/easyui1.4.2/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="jquery/easyui1.4.2/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="jquery/underscore-min.js"></script>
    <script type="text/javascript" src="mintor/hcharts/highcharts.js"></script>
    <script type="text/javascript" src="mintor/hcharts/highcharts-more.js"></script>
    <script type="text/javascript" src="mintor/datadiagnosis/js/cncdiagnosis.js"></script>
    <script type="text/javascript">var type = 0;</script>
    <style type="text/css">
        #L1 {
            background-color: #7db4d8;
            cursor: hand;
            color: #000000;
            border-left: 1px solid #FFFFFF;
            border-top: 1px solid #FFFFFF;
            border-right: 1px solid gray;
            font-weight: bold;
        }

        #L2 {
            background-color: #eef4f9;
            cursor: hand;
            color: #000000;
            border-left: 1px solid #FFFFFF;
            border-top: 1px solid #FFFFFF;
            border-right: 1px solid gray;
            border-bottom: 1px solid #FFFFFF;
        }

        .btn-success,
        .btn-success:hover {
            background-color: #92c0ea !important;
            border-color: #92c0ea
        }

        .btn-success,
        .btn-success :active {
            background-color: #92c0ea !important;
            border-color: #92c0ea
        }

        .btn-success,
        .btn-success:focus {
            background-color: #92c0ea !important;
            border-color: #92c0ea
        }

        .header.green {
            border-bottom-color: #92c0ea;
        }

        .green {
            color: #92c0ea !important;
        }

        .widget-box {
            border-bottom: 0px;
        }

        .panel-body {
            padding: 0px;
        }

        input[readonly] {
            background: #ffffff !important;
            cursor: default;
        }

        /*表头*/
        .datagrid-header-row td {
            background-color: #fafafa;
            color: black;
            font-size: 120%;
            font-weight: bold;
        }
        .color-block {
            width:40px ;
            height: 40px ;
        }
    </style>
</head>

<script type="text/javascript">
    var errors;
    var wsPath = "<%=webSocketPath%>";
    var webSocket = new WebSocket('ws://' + wsPath + '/websocket/001-ERR');
    webSocket.onerror = function (event) {
        onError(event)
    };
    webSocket.onopen = function (event) {
        onOpen(event)
    };
    webSocket.onmessage = function (event) {
        onMessage(event)
    };
    function onMessage(event) {
        console.log(event.data);
        var data = JSON.parse(event.data);
        if (data.value) {
            errors = data.value.split(",");
        }
        var val = "";
        for (var i = 0; i < errors.length; i++) {
            var num=i+1;
            var errordisplay="<p id='sensorNum'>告警"+num+":"+errors[i]+"<br/></p>";
            val = val+errordisplay;
        }
        document.getElementById("errornum").innerHTML =val;
        $("#errornum").show();
    }
    function onOpen(event) {
        console.log("open")
    }
    function onError(event) {
        alert(event.data);
    }
    function start() {
        webSocket.send('hello');
        return false;
    }
</script>

<body style="background-color:white;">

    <div class="row-left" style="margin-top: 16px;margin-left: 30px;display:inline-block;" >车间:&nbsp;&nbsp;
        <input id="workshopId" name="workshopId"
              style="width: 120px;	height:	29px;"
              class="easyui-combobox form-control"
              data-options="required:true">&nbsp;&nbsp;
        <button class="btn btn-sm btn-primary center">转换</button><br><br>
        <form action="" method="get" style="height:50px">
            <label><input name="X-axis" type="radio" value=""  onclick="chkRadio(this)"/>X轴 </label>
            <label><input name="Y-axis" type="radio" value="" onclick="chkRadio(this)"/>Y轴 </label>
            <label><input name="Z-axis" type="radio" value="" onclick="chkRadio(this)"/>Z轴 </label>
            <label><input name="mainaxis" type="radio" value="" onclick="chkRadio(this)"/>主轴 </label>
            <label><input name="machinetool" type="radio" value="" onclick="chkRadio(this)"/>机床 </label>
            <label><input name="toolmagazine" type="radio" value="" onclick="chkRadio(this)"/>刀库 </label>
        </form>
    </div>
    <div class="row-right" style="margin-top: 50px;margin-right: 30px;float: right;text-align: center;display:inline-block;">
        <label><div class="color-block " style="background-color:rgb(16,243,61)" ></div>健康</label>&nbsp;&nbsp;
        <label><div class="color-block " style="background-color:rgb(218,251,31)" ></div>良好</label>&nbsp;&nbsp;
        <label><div class="color-block " style="background-color:rgb(229,21,31)" ></div>报警</label>
    </div>

    <div class="widget-box" style="margin:16px 24px;padding-bottom:15px;text-align: center;">
        <div class="widget-header header-color-blue" style="border-top-left-radius:10px;border-top-right-radius:10px;">
            <h4 style="color:white;font-family: '微软雅黑'">机床健康状态</h4>
        </div>
        <div class="widget-body" id="equipment" style="border-bottom-right-radius:10px;border-bottom-left-radius:10px;display: block ">
            <div class="widget-main">
                <div class="row">
                    <div>
                        <input type="image" src="img/equipment.png" style="margin-right: 30px" onclick="ChangeDivShow(1)">&nbsp;&nbsp;
                        <input type="image" src="img/equipment.png" style="margin-right: 30px" onclick="ChangeDivShow(1)">&nbsp;&nbsp;
                        <input type="image" src="img/equipment.png" style="margin-right: 30px" onclick="ChangeDivShow(1)">&nbsp;&nbsp;
                        <input type="image" src="img/equipment.png" onclick="ChangeDivShow(1)">
                    </div>
                </div>
            </div>
        </div>

        <div class="widget-body" id="health" style="border-bottom-right-radius:10px;border-bottom-left-radius:10px;min-height:500px;display: none">
            <div class="widget-main">
                <button class="btn btn-sm btn-primary center" onclick="ChangeDivShow(2)" style="display: block">返回</button>
                <div class="row">
                    <div id="container_spider" style="min-width: 400px; max-width: 600px; height: 400px; float:left; margin: 0 auto;left: 5%;position: absolute;"></div>
                    <div id="container_rectangle" style="min-width:400px;height:400px;margin-left:35px;float:left;left: 37%;position: absolute;"></div>
                    <div style="position: absolute;left: 75%;">
                        <p style="margin-top: 5px;font-size: large;">健康指数</p>
                        <p>主轴
                            <input type="text" name="input1" value="0.98" readonly="true">
                        </p>
                        <p>X轴
                            <input type="text" name="input1" value="0.90" readonly="true"
                                   style="margin-right: -6px;">
                        </p>
                        <p>Y轴
                            <input type="text" name="input1" value="0.96" readonly="true"
                                   style="margin-right: -6px;">
                        </p>
                        <p>Z轴
                            <input type="text" name="input1" value="0.94" readonly="true"
                                   style="margin-right: -6px;">
                        </p>
                        <p>刀库
                            <input type="text" name="input1" value="0.80" readonly="true">
                        </p>
                        <br><br>
                        <p style="font-size: large;">总体健康指数</p>
                        <p>机床
                            <input type="text" name="input1" value="0.96" readonly="true">
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <%--<div id="lbl_tip" class="lbl" style="display: none;">--%>
        <%--<p2 id="sensorNum">传感器编号: <span class="c">001-SDT00-04</span><br/></p2>--%>
        <%--<p2 id="sensorValue">数值: <span class="c">28.5度</span><br/></p2>--%>
    <%--</div>--%>
    <div id="errornum" style="margin-left: 50px;display: none;"><input type="textarea" value="sdhfskhfssdadad"></div>
</body>

</html>